
<script lang="ts" setup>
const nav=[
    {
        id:1,
        text:'智能检测',
        img:"/src/assets/image/zhineng.jpg",
        activeImg:'/src/assets/image/zhineng-active.jpg',
        isOrange:false,
        url:'/home'
    },
     {
        id:2,
        text:'就业态势',
        img:"/src/assets/image/employment.jpg",
        activeImg:'/src/assets/image/employment-active.jpg',
        isOrange:false,
        url:'/employment'
    },
     {
        id:3,
        text:'安防管理',
        img:"/src/assets/image/security.jpg",
        activeImg:'/src/assets/image/security-active.jpg',
        isOrange:false,
        url:'/security'
    },
     {
        id:4,
        text:'运营设备',
        img:"/src/assets/image/equipment.jpg",
        activeImg:'/src/assets/image/equipment-active.jpg',
        isOrange:false,
        url:'/equipment'
    }
]
import {RouterLink} from 'vue-router'
import {useRoute} from 'vue-router'
const {path}=useRoute()
let obj=nav.find(item=>item.url===path)
obj.isOrange=true
</script>

<template>
  <div class="bb">
   <RouterLink v-for="item in nav" :key="item.id" :to="item.url">
    <img v-if="!item.isOrange" :src="item.img" alt="">
    <img v-if="item.isOrange" :src="item.activeImg" alt="">
    <p>{{ item.text }}</p>
   </RouterLink>
  </div>
</template>

<style lang="scss" scoped>
.bb{
    background:url('../assets/images/tab.png') 0 0 / 100% 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    a{
        margin: 0 6px;
        img{
            width: 40px;
            height: 40px;
        }
        p{
            padding: 0;
            margin: 0;
            color: #fff;
            text-align: center;
            font-size: 14px;
        }
    }
}

</style>